<?php include "../public/header.php";?>
<?php include "../public/header_show.php";?>
<link rel="stylesheet" type="text/css" href="/static/component/lib/updavar/css/ycbootstrap.css"/>
<link rel="stylesheet" type="text/css" href="/static/component/lib/updavar/css/reset.css"/>
<script src='/static/component/lib/updavar/js/jquery-2.1.3.min.js'></script>
<script src="/static/component/lib/updavar/js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/component/lib/updavar/js/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/component/lib/updavar/js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/component/lib/updavar/js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>

<style>
    #showPage{overflow-x: hidden}
    #avatar img{width: 100px;height: 100px}

    .leftavas{width: 50%;float: left;height: 320px;text-align: center;}
    #deatou{border: 1px dashed #eee;width: 100px;height: 100px;display: inline-block;margin-top: 100px;border-radius: 50%}
    #deatou img{width: 100%;height: 100%;border-radius: 50%}
    #upload_avatar{color: #0E0EFF;cursor: pointer;margin: 20px 0 10px 0}
    .deatou_exp{margin: 10px 0}
    .deatou_exp .jieshi{color: #777}
    #uploadfile{display: none}


    #uploadqian{display: none}
    .qian{text-align: center;margin-top: 100px}
    .qian .kuang{width: 210px;height: 90px;border: 1px solid #eee;margin: 0 auto;margin-bottom: 20px}
    .qian .kuang .zanno{color: #ccc;margin-top: 35px}
    .qian .jieshi{color: #777;margin-top: 15px}
    .qian_but{color: #0E0EFF;cursor: pointer;margin: 0 10px}
    #qian_dea{max-height: 100%;display: none}
</style>
<body id="showPage">
<div id="showBox">
    <div class="page-title">
        <div class="page-title-con">
            <span>个人档案</span>
            <div class="page-title-opt-list">
                <span id="page-close" class="page-close" onclick="layer_close()">×</span>
            </div>
        </div>
    </div>

    <div class="main-container" style="height: 500px;background-color: #FFFFFF">
        <div class="leftavas">

            <div id="deatou">
                <input type="hidden" id="avatar" name="avatar">
                <input type="hidden" id="avatar_id" name="avatar_id">
                <img id="avatar_dea" src="/static/admin/images/avatar.png">
            </div>
            <div class="deatou_exp">
                <input type="file" accept="image/*" id="uploadfile" value="上传头像" />
                <div id="upload_avatar">上传头像</div>
                <div class="jieshi">请上传jpg或png文件,文件大小不超过1M</div>
            </div>

            <div class="qian">
                <div class="kuang">
                    <img id="qian_dea" src="/static/admin/images/avatar.png">
                    <div class="zanno">暂无签名</div>
                </div>
                <input type="file" accept="image/*" id="uploadqian" value="上传头像" />
                <span id="upload_qian" class="qian_but">上传签名</span>
                <span id="huan_qian" class="qian_but layui-hide">更换签名</span>
                <span id="delete_qian" class="qian_but layui-hide">删除签名</span>
                <div class="jieshi">仅支持jpg、JPEG或png格式，建议背景色为白色，宽高比为7:3，大小不超过2M</div>
            </div>



        </div>
        <div class="table-box" style="width: 50%;float: right;clear: unset">
            <div class="title">
                个人信息
            </div>
            <table class="layui-table table-detail">
                <tbody>
                <tr><td>姓名</td><td id="realname"></td></tr>
                <tr><td>登录手机号</td><td id="tel"></td></tr>
                <tr><td>登录密码</td><td>已设置 <span id="updpass" class="colorlan" style="float: right">修改密码</span></td></tr>
                <tr><td>所属部门</td><td id="deptid_name"></td></tr>
                <tr><td>岗位</td><td id="gangid_name"></td></tr>
                <tr><td>角色</td><td id="roleid_name"></td></tr>
                <tr><td>账号状态</td><td id="status_name"></td></tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="yc-upload-wrap">
        <div class="yc-upload-box">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">

                        <div class="ycupload-mainbox">
<!--                            <div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">-->
<!--				        			<span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">-->
<!--				        				&middot;-->
<!--				        			</span>-->
<!--                                <span style="float:left;color:#333;font-size:16px;line-height:60px;margin-right:28px;">-->
<!--				        				上传封面-->
<!--				        			</span>-->
<!--                            </div>-->
                            <div class="ycupload-line"></div>
                            <div style="height:30px;"></div>
                            <div  style="min-height:1px;">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
                                            <!--<a href="javascript:void(0);" class="cover-uploadBtn">
                                                <img src="img/yc_uploadimg_06.png"/>
                                                <div id="clipArea"></div>
                                                <input type="file" id="file">
                                                <button id="clipBtn">截取</button>
                                            </a>
                                            <div id="view"></div>-->
                                            <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                                                <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                                                    <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                                        <div id="clipArea" style="margin:10px;height: 520px;"></div>
                                                        <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                                            <button id="clipQuxiao" style="width:120px;height: 36px;border-radius: 4px;background-color:#aaa;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">取消</button>
                                                            <button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存</button>
                                                        </div>
                                                    </div>
                                                </div>
<!--                                                <div id="view" style="width:214px;height:160.5px;" title="请上传 428*321 的封面图片"></div>-->
<!--                                                <div style="height:10px;"></div>-->
<!--                                                <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">-->
<!--                                                    点击上传封面图-->
<!--                                                    <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">-->
<!--                                                </div>-->
                                            </div>


                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div style="height:25px;"></div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="yc-upload-wrap">
        <div class="yc-upload-box">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">

                        <div class="ycupload-mainbox">
<!--                            <div class="ycupload-main1" style="overflow:hidden;padding-left:25px;">-->
<!--				        			<span style="float:left;color:#ff5a5a;font-size:14px;line-height:60px;font-weight:900;margin-right:7px;">-->
<!--				        				&middot;-->
<!--				        			</span>-->
<!--                                <span style="float:left;color:#333;font-size:16px;line-height:60px;margin-right:28px;">-->
<!--				        				上传封面-->
<!--				        			</span>-->
<!--                            </div>-->
                            <div class="ycupload-line"></div>
                            <div style="height:30px;"></div>
                            <div  style="min-height:1px;">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">
                                            <!--<a href="javascript:void(0);" class="cover-uploadBtn">
                                                <img src="img/yc_uploadimg_06.png"/>
                                                <div id="clipArea"></div>
                                                <input type="file" id="file">
                                                <button id="clipBtn">截取</button>
                                            </a>
                                            <div id="view"></div>-->
                                            <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                                                <div class="cover-wrap-qian" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                                                    <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                                                        <div id="clipArea_qian" style="margin:10px;height: 520px;"></div>
                                                        <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                                            <button id="clipQuxiao_qian" style="width:120px;height: 36px;border-radius: 4px;background-color:#aaa;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">取消</button>
                                                            <button id="clipBtn_qian" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存</button>
                                                        </div>
                                                    </div>
                                                </div>
<!--                                                <div id="view_qian" style="width:214px;height:160.5px;" title="请上传 428*321 的封面图片"></div>-->
<!--                                                <div style="height:10px;"></div>-->
<!--                                                <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">-->
<!--                                                    点击上传封面图-->
<!--                                                    <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">-->
<!--                                                </div>-->
                                            </div>


                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div style="height:25px;"></div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<script>
    var param_id = getQueryVariable('id') || 0;


    var curHeight = document.body.scrollHeight - 125;
    $(".main-container").css('height', curHeight+'px');

    layui.use(["laytp",'laypage','table','dropdown','form','soulTable','element'], function () {
        var laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown, form = layui.form, soulTable = layui.soulTable,element = layui.element;

        facade.ajax({url: ask_userinfo_show, data:{id: param_id}}).done(function(res){
            if (res.code === 2000) {
                var data = res.data;
                $("#realname").text(data.realname);
                $("#tel").text(data.tel);
                $("#deptid_name").text(data.deptid_name);
                $("#gangid_name").text(data.gangid_name);
                $("#roleid_name").text(data.roleid_name);
                $("#status_name").text(data.status_name);
                $("#explain").text(data.explain);
                if(data.avatar){
                    $("#avatar_dea").attr('src',get_file_complete(data.avatar));
                }

                $(".qian_but").addClass('layui-hide');
                if(data.qian){
                    $("#qian_dea").attr('src',get_file_complete(data.qian)).show();
                    $(".zanno").hide();
                    $("#huan_qian").removeClass('layui-hide');
                    $("#delete_qian").removeClass('layui-hide');
                }else{
                    $("#upload_qian").removeClass('layui-hide');
                    $(".zanno").show();
                }


                render_from();
            }
        });

        $("#upload_avatar").click(function () {
            $("#uploadfile").click();
        });
        var clipava = new bjj.PhotoClip("#clipArea", {
            size: [428, 428],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [428, 428], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            outputType: "png", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#uploadfile", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
            loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log("照片读取中");
            },
            loadComplete: function() {
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                console.log("照片读取完成");
            },
            //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                $('.cover-wrap').fadeOut();
                $('#view').css('background-size','100% 100%');




                var loading = layui.layer.load(0, {shade: 0.1});
                let fd = new FormData();
                fd.append('file', base64ToFile(dataURL));
                fd.append('token', facade.getCookie('token'));
                fd.append('type', 'userinfo');
                $.ajax({
                    url: server_api_name+ask_upload_avatar,
                    type: "POST",
                    data: fd,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function (res) {
                        layui.layer.close(loading);
                        if (res.code === 2000) {
                            $("#avatar_dea").attr('src',get_file_complete(res.data.encpath)).show();
                            $(".zanno").hide();
                        }else{
                            facade.error(res.data.msg);
                        }
                    },
                    error: function (res) {
                        layui.layer.close(loading);
                        facade.error("网络错误");
                    },
                })


            }
        });
        $("#updpass").click(function () {
            openPageEdit('updpass.php', '770px', '490px');
        });
        $("#clipQuxiao").click(function () {
            $('.cover-wrap').fadeOut();
            $('#view').css('background-size','100% 100%');
        })







        $("#upload_qian").click(function () {
            $("#uploadqian").click();
        });
        $("#huan_qian").click(function () {
            $("#uploadqian").click();
        });
        $("#delete_qian").click(function () {
            layer.confirm("<div class='tit'>是否确认删除？</div><div class='exp'>删除后不可恢复，请谨慎删除</div>", {
                    title:'操作确认',
                    icon: 3,
                    area:['450px','220px'],
                    btn:['确定']
                }, function(conindex){
                    facade.ajax({url: ask_user_delqian}).done(function(res){
                        if (res.code === 2000) {
                            facade.success("提交成功!");
                            window.location.reload();
                            render_from();
                            layer.close(conindex);
                        }
                    });
                }
            )
        });
        var clipArea = new bjj.PhotoClip("#clipArea_qian", {
            size: [420, 180],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [420, 180], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            outputType: "png", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#uploadqian", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: "#view_qian", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn_qian", // 确认截图按钮的选择器或者DOM对象
            loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap-qian').fadeIn();
                console.log("照片读取中");
            },
            loadComplete: function() {
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                console.log("照片读取完成");
            },
            //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                $('.cover-wrap-qian').fadeOut();
                $('#view_qian').css('background-size','100% 100%');




                var loading = layui.layer.load(0, {shade: 0.1});
                let fd = new FormData();
                fd.append('file', base64ToFile(dataURL));
                fd.append('token', facade.getCookie('token'));
                fd.append('type', 'userqian');
                $.ajax({
                    url: server_api_name+ask_upload_avatar,
                    type: "POST",
                    data: fd,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function (res) {
                        layui.layer.close(loading);
                        if (res.code === 2000) {
                            $("#qian_dea").attr('src',get_file_complete(res.data.encpath)).show();
                            $(".zanno").hide();
                            $("#upload_qian").addClass('layui-hide');
                            $("#huan_qian").removeClass('layui-hide');
                            $("#delete_qian").removeClass('layui-hide');

                        }else{
                            facade.error(res.data.msg);
                        }
                    },
                    error: function (res) {
                        layui.layer.close(loading);
                        facade.error("网络错误");
                    },
                })


            }
        });
        $("#clipQuxiao_qian").click(function () {
            $('.cover-wrap-qian').fadeOut();
            $('#view_qian').css('background-size','100% 100%');
        })

    });










    // base64转文件流
    function base64ToFile(base64Data, filename='qian.png') {
        // 将base64的数据部分提取出来
        const parts = base64Data.split(";base64,");
        const contentType = parts[0].split(":")[1];
        let strArr = contentType.split("/");
        console.log('strArr',strArr)
        const raw = window.atob(parts[1]);
        // 将原始数据转换为Uint8Array
        const rawLength = raw.length;
        const uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        // 使用Blob和提取出的数据内容创建一个新的Blob对象
        const blob = new Blob([uInt8Array], { type: contentType });
        // 创建一个指向Blob对象的URL，并使用这个URL创建一个File对象
        const blobUrl = URL.createObjectURL(blob);
        const newFilename = filename + '.' + strArr[1]

        const file = new File([blob], newFilename, { type: contentType });
        // 返回File对象
        return file;
    }

</script>
</body>
</html>
